<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签的样式</title>
    <style>
        *{margin: 0;padding: 0;}
        body{font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,STHeiti,"Microsoft Yahei",sans-serif;-webkit-font-smoothing: antialiased;}
        .block{width: 100%;min-height: 30px}
        .inline{width: 30px;height: 30px}
        .inline-block{width: 80px;height: 30px}
    </style>
    <base href="http://www.runoob.com/images/" target="_blank">
</head>
<body>
    <h1 class="block">h1</h1>
    <h2 class="block">h2</h2>
    <h3 class="block">h3</h3>
    <h4 class="block">h4</h4>
    <h5 class="block">h5</h5>
    <h6 class="block">h6</h6>
    <div class="block">div</div>
    <p class="block">p</p>
    <ul class="block" style="height: 90px">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol class="block" style="height: 90px">
        <li>ol1</li>
        <li>ol2</li>
        <li>ol3</li>
    </ol>
    <dl>
        <dt>定义项目/名字1</dt>
        <dd>描述列表中的项目/名字进行描述</dd>
        <dt>定义项目/名字2</dt>
        <dd>描述列表中的项目/名字进行描述</dd>
        <dt>定义项目/名字3</dt>
        <dd>描述列表中的项目/名字进行描述</dd>
    </dl>
    <address class="block">
        Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
        Visit us at:<br>
        Example.com<br>
        Box 564, Disneyland<br>
        USA
    </address>
    <hr>
    <h3>以下内容IE9+及以上</h3>
    <article class="block">
        <h1>文章标题</h1>
        <p>文章主题内容</p>
    </article>
    <aside class="block">
        <h4>Epcot Center</h4>
        <p>The Epcot Center is a theme park in Disney World, Florida.</p>
    </aside>
    <header class="block">页头或者文章头部</header>
    <nav class="block"></nav>
    <footer class="block">页脚或者文章底部</footer>
    <section class="block">文档中的某个区域</section>
    <blockquote cite="http://www.worldwildlife.org/who/index.html">
        For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization,
        WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
        一个摘自另一个源的块引用
    </blockquote>
    <cite class="block">
        定义一套引用
    </cite>
    <pre class="block" style="width: 300px;height: 40px">
        文本 输入的样式保留   包含空格
    </pre>
    <form class="block" action="">
        表单
    </form>



    <hr>
    <h3>默认inline</h3>
    <span class="inline">span</span><br>
    <a class="inline" href="">a</a><br>
    <img class="inline" src="" alt="img"><br>
    <img src="" width="145" height="126" alt="img+map+area组合,均为行内元素" usemap="#planetmap">
    <map name="planetmap">
        <area shape="rect" coords="0,0,82,126" alt="Sun" href="">
        <area shape="circle" coords="90,58,3" alt="Mercury" href="">
        <area shape="circle" coords="124,58,8" alt="Venus" href="">
    </map><br>
    <em class="inline">em</em><br>
    <b>b文本粗体（不建议用）</b><br>
    <a href="logo.png">runoob.com base相对</a><br>
    <q class="inline">短的引用</q><br>
    <hr>
    <h3>默认inline-block元素</h3>
    <input type="text" value="文本">
    <textarea name=""cols="30" rows="10" class="inline-block">说明</textarea>
    <select name="" class="inline-block">
        <optgroup label="optgroup为block">
            <option>option为block</option>
            <option>option为block</option>
            <option>option为block</option>
        </optgroup>
    </select>
    <button class="inline-block">按钮</button>
    下载进度：IE10及其他浏览器
    <progress value="22" max="100"></progress>

    <hr>
    <h3>表格</h3>
    <table border="1">
        <caption>表格标题</caption>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
        </tr>

    </table>

    <hr>
    <h3>其他（没有设置display属性）</h3>
    <p>H<sub>2</sub>O</p>
    <p>x<sup>2</sup>=x*x</p>

</body>
</html>

